@include("member::home.public.head")

<body data-layout="detached" data-topbar="colored">

<!-- <body data-layout="horizontal" data-topbar="dark"> -->

<div class="container-fluid">
    <!-- Begin page -->
    <div id="layout-wrapper">

        @include("member::home.public.header")

        <!-- ========== Left Sidebar Start ========== -->
        @include("member::home.public.leftnav")
        <!-- Left Sidebar End -->

        <!-- ============================================================== -->
        <!-- Start right Content here -->
        <!-- ============================================================== -->
        <div class="main-content">

            <div class="page-content">

                <!-- start page title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box d-flex align-items-center justify-content-between">
                            <h4 class="page-title mb-0 font-size-18">站内信</h4>

                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="{{url("member")}}">会员中心</a></li>
                                    <li class="breadcrumb-item active">站内信</li>
                                </ol>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- end page title -->

                <div class="row">
                    <div class="col-12">
                        <!-- Left sidebar -->
                        <div class="email-leftbar card">
                            <div class="d-grid">
                                <button type="button" class="btn btn-danger waves-effect waves-light" data-bs-toggle="modal" data-bs-target="#composemodal">
                                    Compose
                                </button>
                            </div>
                            <div class="mail-list mt-4">
                                <a href="javascript: void(0);" class="active"><i class="mdi mdi-email-outline me-2"></i> Inbox <span class="ms-1 float-end">(18)</span></a>
                                <a href="javascript: void(0);"><i class="mdi mdi-star-outline me-2"></i>Starred</a>
                                <a href="javascript: void(0);"><i class="mdi mdi-diamond-stone me-2"></i>Important</a>
                                <a href="javascript: void(0);"><i class="mdi mdi-file-outline me-2"></i>Draft</a>
                                <a href="javascript: void(0);"><i class="mdi mdi-email-check-outline me-2"></i>Sent Mail</a>
                                <a href="javascript: void(0);"><i class="mdi mdi-trash-can-outline me-2"></i>Trash</a>
                            </div>

                        </div>
                        <!-- End Left sidebar -->

                        <!-- Right Sidebar -->
                        <div class="email-rightbar mb-3">

                            <div class="card">
                                <div class="btn-toolbar p-3" role="toolbar">
                                    <div class="btn-group me-2 mb-2 mb-sm-0">
                                        <button type="button" class="btn btn-primary waves-light waves-effect"><i class="fa fa-inbox"></i></button>
                                        <button type="button" class="btn btn-primary waves-light waves-effect"><i class="fa fa-exclamation-circle"></i></button>
                                        <button type="button" class="btn btn-primary waves-light waves-effect"><i class="far fa-trash-alt"></i></button>
                                    </div>
                                    <div class="btn-group me-2 mb-2 mb-sm-0">
                                        <button type="button" class="btn btn-primary waves-light waves-effect dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="fa fa-folder"></i> <i class="mdi mdi-chevron-down ms-1"></i>
                                        </button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="javascript: void(0);">Updates</a>
                                            <a class="dropdown-item" href="javascript: void(0);">Social</a>
                                            <a class="dropdown-item" href="javascript: void(0);">Team Manage</a>
                                        </div>
                                    </div>
                                    <div class="btn-group me-2 mb-2 mb-sm-0">
                                        <button type="button" class="btn btn-primary waves-light waves-effect dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                            <i class="fa fa-tag"></i> <i class="mdi mdi-chevron-down ms-1"></i>
                                        </button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="javascript: void(0);">Updates</a>
                                            <a class="dropdown-item" href="javascript: void(0);">Social</a>
                                            <a class="dropdown-item" href="javascript: void(0);">Team Manage</a>
                                        </div>
                                    </div>

                                    <div class="btn-group me-2 mb-2 mb-sm-0">
                                        <button type="button" class="btn btn-primary waves-light waves-effect dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                            More <i class="mdi mdi-dots-vertical ms-2"></i>
                                        </button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item" href="javascript: void(0);">Mark as Unread</a>
                                            <a class="dropdown-item" href="javascript: void(0);">Mark as Important</a>
                                            <a class="dropdown-item" href="javascript: void(0);">Add to Tasks</a>
                                            <a class="dropdown-item" href="javascript: void(0);">Add Star</a>
                                            <a class="dropdown-item" href="javascript: void(0);">Mute</a>
                                        </div>
                                    </div>
                                </div>
                                <ul class="message-list">
                                    <li>
                                        <div class="col-mail col-mail-1">
                                            <div class="checkbox-wrapper-mail">
                                                <input type="checkbox" id="chk19">
                                                <label for="chk19" class="toggle"></label>
                                            </div>
                                            <a href="javascript: void(0);" class="title">Peter, me (3)</a><span class="star-toggle far fa-star"></span>
                                        </div>
                                        <div class="col-mail col-mail-2">
                                            <a href="javascript: void(0);" class="subject">Hello – <span class="teaser">Trip home from
                                                            Colombo has been arranged, then Jenna will come get me from
                                                            Stockholm. :)</span>
                                            </a>
                                            <div class="date">Mar 6</div>
                                        </div>
                                    </li>

                                    <li>
                                        <div class="col-mail col-mail-1">
                                            <div class="checkbox-wrapper-mail">
                                                <input type="checkbox" id="chk20">
                                                <label for="chk20" class="toggle"></label>
                                            </div>
                                            <a href="javascript: void(0);" class="title">me, Susanna (7)</a><span class="star-toggle far fa-star"></span>
                                        </div>
                                        <div class="col-mail col-mail-2">
                                            <a href="javascript: void(0);" class="subject"><span class="bg-warning badge me-2">Freelance</span>Since you
                                                asked... and i'm
                                                inconceivably bored at the train station –
                                                <span class="teaser">Alright thanks. I'll have to re-book that
                                                            somehow, i'll get back to you.</span>
                                            </a>
                                            <div class="date">Mar. 6</div>
                                        </div>
                                    </li>

                                    <li>
                                        <div class="col-mail col-mail-1">
                                            <div class="checkbox-wrapper-mail">
                                                <input type="checkbox" id="chk6">
                                                <label for="chk6" class="toggle"></label>
                                            </div>
                                            <a href="javascript: void(0);" class="title">Web Support Dennis</a><span class="star-toggle far fa-star"></span>
                                        </div>
                                        <div class="col-mail col-mail-2">
                                            <a href="javascript: void(0);" class="subject">Re: New mail settings –
                                                <span class="teaser">Will you answer him asap?</span>
                                            </a>
                                            <div class="date">Mar 7</div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="col-mail col-mail-1">
                                            <div class="checkbox-wrapper-mail">
                                                <input type="checkbox" id="chk7">
                                                <label for="chk7" class="toggle"></label>
                                            </div>
                                            <a href="javascript: void(0);" class="title">me, Peter (2)</a><span class="star-toggle far fa-star"></span>
                                        </div>
                                        <div class="col-mail col-mail-2">
                                            <a href="javascript: void(0);" class="subject"><span class="bg-info badge me-2">Support</span>Off on Thursday -
                                                <span class="teaser">Eff that place, you might as well stay here
                                                            with us instead! Sent from my iPhone 4 4 mar 2014 at 5:55
                                                            pm</span>
                                            </a>
                                            <div class="date">Mar 4</div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="col-mail col-mail-1">
                                            <div class="checkbox-wrapper-mail">
                                                <input type="checkbox" id="chk8">
                                                <label for="chk8" class="toggle"></label>
                                            </div>
                                            <a href="javascript: void(0);" class="title">Medium</a><span class="star-toggle far fa-star"></span>
                                        </div>
                                        <div class="col-mail col-mail-2">
                                            <a href="javascript: void(0);" class="subject"><span class="bg-primary badge me-2">Social</span>This Week's Top
                                                Stories –
                                                <span class="teaser">Our top pick for you on Medium this week The
                                                            Man Who Destroyed America’s Ego</span>
                                            </a>
                                            <div class="date">Feb 28</div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="col-mail col-mail-1">
                                            <div class="checkbox-wrapper-mail">
                                                <input type="checkbox" id="chk9">
                                                <label for="chk9" class="toggle"></label>
                                            </div>
                                            <a href="javascript: void(0);" class="title">Death to Stock</a><span class="star-toggle far fa-star"></span>
                                        </div>
                                        <div class="col-mail col-mail-2">
                                            <a href="javascript: void(0);" class="subject">Montly High-Res Photos –
                                                <span class="teaser">To create this month's pack, we hosted a party
                                                            with local musician Jared Mahone here in Columbus, Ohio.</span>
                                            </a>
                                            <div class="date">Feb 28</div>
                                        </div>
                                    </li>

                                    <li class="unread">
                                        <div class="col-mail col-mail-1">
                                            <div class="checkbox-wrapper-mail">
                                                <input type="checkbox" id="chk3">
                                                <label for="chk3" class="toggle"></label>
                                            </div>
                                            <a href="javascript: void(0);" class="title">Randy, me (5)</a><span class="star-toggle far fa-star"></span>
                                        </div>
                                        <div class="col-mail col-mail-2">
                                            <a href="javascript: void(0);" class="subject"><span class="bg-success badge me-2">Family</span>Last pic over my
                                                village –
                                                <span class="teaser">Yeah i'd like that! Do you remember the video
                                                            you showed me of your train ride between Colombo and Kandy? The
                                                            one with the mountain view? I would love to see that one
                                                            again!</span>
                                            </a>
                                            <div class="date">5:01 am</div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="col-mail col-mail-1">
                                            <div class="checkbox-wrapper-mail">
                                                <input type="checkbox" id="chk4">
                                                <label for="chk4" class="toggle"></label>
                                            </div>
                                            <a href="javascript: void(0);" class="title">Andrew Zimmer</a><span class="star-toggle far fa-star"></span>
                                        </div>
                                        <div class="col-mail col-mail-2">
                                            <a href="javascript: void(0);" class="subject">Mochila Beta: Subscription Confirmed
                                                – <span class="teaser">You've been confirmed! Welcome to the ruling
                                                            class of the inbox. For your records, here is a copy of the
                                                            information you submitted to us...</span>
                                            </a>
                                            <div class="date">Mar 8</div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="col-mail col-mail-1">
                                            <div class="checkbox-wrapper-mail">
                                                <input type="checkbox" id="chk5">
                                                <label for="chk5" class="toggle"></label>
                                            </div>
                                            <a href="javascript: void(0);" class="title">Infinity HR</a><span class="star-toggle far fa-star"></span>
                                        </div>
                                        <div class="col-mail col-mail-2">
                                            <a href="javascript: void(0);" class="subject">Sveriges Hetaste sommarjobb –
                                                <span class="teaser">Hej Nicklas Sandell! Vi vill bjuda in dig till
                                                            "First tour 2014", ett rekryteringsevent som erbjuder jobb på 16
                                                            semesterorter iSverige.</span>
                                            </a>
                                            <div class="date">Mar 8</div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="col-mail col-mail-1">
                                            <div class="checkbox-wrapper-mail">
                                                <input type="checkbox" id="chk10">
                                                <label for="chk10" class="toggle"></label>
                                            </div>
                                            <a href="javascript: void(0);" class="title">Revibe</a><span class="star-toggle far fa-star"></span>
                                        </div>
                                        <div class="col-mail col-mail-2">
                                            <a href="javascript: void(0);" class="subject"><span class="bg-danger badge me-2">Friends</span>Weekend on Revibe
                                                –
                                                <span class="teaser">Today's Friday and we thought maybe you want
                                                            some music inspiration for the weekend. Here are some trending
                                                            tracks and playlists we think you should give a listen!</span>
                                            </a>
                                            <div class="date">Feb 27</div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="col-mail col-mail-1">
                                            <div class="checkbox-wrapper-mail">
                                                <input type="checkbox" id="chk11">
                                                <label for="chk11" class="toggle"></label>
                                            </div>
                                            <a href="javascript: void(0);" class="title">Erik, me (5)</a><span class="star-toggle far fa-star"></span>
                                        </div>
                                        <div class="col-mail col-mail-2">
                                            <a href="javascript: void(0);" class="subject">Regarding our meeting –
                                                <span class="teaser">That's great, see you on Thursday!</span>
                                            </a>
                                            <div class="date">Feb 24</div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="col-mail col-mail-1">
                                            <div class="checkbox-wrapper-mail">
                                                <input type="checkbox" id="chk12">
                                                <label for="chk12" class="toggle"></label>
                                            </div>
                                            <a href="javascript: void(0);" class="title">KanbanFlow</a><span class="star-toggle far fa-star"></span>
                                        </div>
                                        <div class="col-mail col-mail-2">
                                            <a href="javascript: void(0);" class="subject"><span class="bg-primary badge me-2">Social</span>Task assigned:
                                                Clone ARP's website
                                                – <span class="teaser">You have been assigned a task by Alex@Work on
                                                            the board Web.</span>
                                            </a>
                                            <div class="date">Feb 24</div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="col-mail col-mail-1">
                                            <div class="checkbox-wrapper-mail">
                                                <input type="checkbox" id="chk13">
                                                <label for="chk13" class="toggle"></label>
                                            </div>
                                            <a href="javascript: void(0);" class="title">Tobias Berggren</a><span class="star-toggle far fa-star"></span>
                                        </div>
                                        <div class="col-mail col-mail-2">
                                            <a href="javascript: void(0);" class="subject">Let's go fishing! –
                                                <span class="teaser">Hey, You wanna join me and Fred at the lake
                                                            tomorrow? It'll be awesome.</span>
                                            </a>
                                            <div class="date">Feb 23</div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="col-mail col-mail-1">
                                            <div class="checkbox-wrapper-mail">
                                                <input type="checkbox" id="chk14">
                                                <label for="chk14" class="toggle"></label>
                                            </div>
                                            <a href="javascript: void(0);" class="title">Charukaw, me (7)</a><span class="star-toggle far fa-star"></span>
                                        </div>
                                        <div class="col-mail col-mail-2">
                                            <a href="javascript: void(0);" class="subject">Hey man – <span class="teaser">Nah man sorry
                                                            i don't. Should i get it?</span>
                                            </a>
                                            <div class="date">Feb 23</div>
                                        </div>
                                    </li>
                                    <li class="unread">
                                        <div class="col-mail col-mail-1">
                                            <div class="checkbox-wrapper-mail">
                                                <input type="checkbox" id="chk15">
                                                <label for="chk15" class="toggle"></label>
                                            </div>
                                            <a href="javascript: void(0);" class="title">me, Peter (5)</a><span class="star-toggle far fa-star"></span>
                                        </div>
                                        <div class="col-mail col-mail-2">
                                            <a href="javascript: void(0);" class="subject"><span class="bg-info badge me-2">Support</span>Home again! – <span class="teaser">That's just perfect! See you tomorrow.</span>
                                            </a>
                                            <div class="date">Feb 21</div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="col-mail col-mail-1">
                                            <div class="checkbox-wrapper-mail">
                                                <input type="checkbox" id="chk16">
                                                <label for="chk16" class="toggle"></label>
                                            </div>
                                            <a href="javascript: void(0);" class="title">Stack Exchange</a><span class="star-toggle far fa-star"></span>
                                        </div>
                                        <div class="col-mail col-mail-2">
                                            <a href="javascript: void(0);" class="subject">1 new items in your Stackexchange inbox
                                                – <span class="teaser">The following items were added to your Stack
                                                            Exchange global inbox since you last checked it.</span>
                                            </a>
                                            <div class="date">Feb 21</div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="col-mail col-mail-1">
                                            <div class="checkbox-wrapper-mail">
                                                <input type="checkbox" id="chk17">
                                                <label for="chk17" class="toggle"></label>
                                            </div>
                                            <a href="javascript: void(0);" class="title">Google Drive Team</a><span class="star-toggle far fa-star"></span>
                                        </div>
                                        <div class="col-mail col-mail-2">
                                            <a href="javascript: void(0);" class="subject">You can now use your storage in Google
                                                Drive – <span class="teaser">Hey Nicklas Sandell! Thank you for
                                                            purchasing extra storage space in Google Drive.</span>
                                            </a>
                                            <div class="date">Feb 20</div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="col-mail col-mail-1">
                                            <div class="checkbox-wrapper-mail">
                                                <input type="checkbox" id="chk18">
                                                <label for="chk18" class="toggle"></label>
                                            </div>
                                            <a href="javascript: void(0);" class="title">me, Susanna (11)</a><span class="star-toggle far fa-star"></span>
                                        </div>
                                        <div class="col-mail col-mail-2">
                                            <a href="javascript: void(0);" class="subject">Train/Bus – <span class="teaser">Yes ok,
                                                            great! I'm not stuck in Stockholm anymore, we're making
                                                            progress.</span>
                                            </a>
                                            <div class="date">Feb 19</div>
                                        </div>
                                    </li>

                                </ul>

                            </div>
                            <!-- card -->

                            <div class="row">
                                <div class="col-7">
                                    Showing 1 - 20 of 1,524
                                </div>
                                <div class="col-5">
                                    <div class="btn-group float-end">
                                        <button type="button" class="btn btn-sm btn-success waves-effect"><i class="fa fa-chevron-left"></i></button>
                                        <button type="button" class="btn btn-sm btn-success waves-effect"><i class="fa fa-chevron-right"></i></button>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <!-- end Col-9 -->

                    </div>

                </div>
                <!-- end row -->

            </div>
            <!-- End Page-content -->

            @include("member::home.public.footer")
        </div>
        <!-- end main content-->

    </div>
    <!-- END layout-wrapper -->

</div>
<!-- end container-fluid -->

<!-- Right bar overlay-->
<div class="rightbar-overlay"></div>

@include("member::home.public.js")

</body>

</html>
